<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

// 数据存储
const chartData = ref([]);

// 获取API数据
const fetchChartData = async () => {
  try {
    const response = await axios.get('/book-api/queryAllAdsDiscountRatioAnalysis');
    if (response.data.code === '200') {
      chartData.value = response.data.data;
      initChart();
    } else {
      console.error('数据获取失败:', response.data.msg);
    }
  } catch (error) {
    console.error('API调用失败:', error);
  }
};

// 初始化基础散点图
const initChart = () => {
  const chartDom = document.getElementById('discountScatterChart');
  if (!chartDom) return;

  const chart = echarts.init(chartDom);

  const option = {
    title: {
      text: '折扣占比散点图',
      left: 'center',
      textStyle: {
        color: '#FFF',
        fontWeight: 'bold',
        fontSize: '25px'
      },
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: chartData.value.map(item => item.name),
      name: '折扣'
    },
    yAxis: {
      type: 'value',
      name: '数量'
    },
    series: [
      {
        name: '折扣数量',
        type: 'scatter',
        data: chartData.value.map(item => [item.name, item.value])
      }
    ]
  };

  chart.setOption(option);
};

// 页面挂载时调用
onMounted(fetchChartData);
</script>

<template>
  <div id="d1">
    <div id="discountScatterChart" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<style scoped>
#d1 {
  width: 569px;
  height:500px;
  margin: 10px auto 0px;
}

#discountScatterChart {
  padding-bottom: -20px;
}
</style>
